<template>
	<view>
		<view class="p-navbox">
			<view :class="tab==1?'p-nav p-checked':'p-nav'" @click="tab=1">待使用</view>
			<view :class="tab==2?'p-nav p-checked':'p-nav'" @click="tab=2">已使用</view>
		</view>
		<view v-if="tab==1">
			<view class="bkk" v-for="(item,index) in serviceOrder" :key="index" v-if="item.state!='已使用'">
				<view class="bl b20">
					<text style="font-size: 16px;font-weight: 600;">{{item.serviceName}}</text>
					<text class="red">{{item.state}}</text>
				</view>
				<view class="b10">{{item.userName}} {{item.phone}}</view>
				<view class="b10"><text style="color:#888888; ">时间：</text>{{item.serviceDate}}</view>
				<view class="b10"><text style="color:#888888; ">地点：</text>{{item.serviceSite}}</view>
				<view><text style="color:#888888; ">类型：</text>{{item.type}}</view>
				<view class="b10"><text style="color:#888888; ">价格：</text>{{item.price}}{{item.unit}}</view>
				<view class="" style="text-align: center;">
					<view class="b30"></view>
					<view class="">
						<view class="b10">核销码</view>
						<view style="font-size: 30px;">{{item.verifyCode}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else-if="tab==2">
			<view class="bkk" v-for="(item,index) in serviceOrder" :key="index" v-if="item.state=='已使用'">
				<view class="bl b20">
					<text style="font-size: 16px;font-weight: 600;">{{item.serviceName}}</text>
					<text class="red">{{item.state}}</text>
				</view>
				<view class="b10"><text style="color:#888888; ">时间：</text>{{item.serviceDate}}</view>
				<view class="b10"><text style="color:#888888; ">地点：</text>{{item.serviceSite}}</view>
				<view><text style="color:#888888; ">类型：</text>{{item.type}}</view>
				<view class="b10"><text style="color:#888888; ">价格：</text>{{item.price}}{{item.unit}}</view>
				<view class="" style="text-align: center;">
					<view class=""><button>评价</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 1,
				serviceOrder: []
			}
		},
		methods: {
			/**
			 * 获取预约服务订单列表
			 */
			getServiceOrder() {
				let _this = this
				this.httpRequest({
					url: '/service/appoint/list',
					method: 'GET',
					fn(data) {
						_this.serviceOrder = data.records
						console.log("响应：", data)
						_this.pages = data.pages
						_this.total = data.total
						_this.current = data.current
						_this.size = data.size
						for (let i in _this.serviceOrder) {
							if (_this.serviceOrder[i].serviceDate) {
								_this.serviceOrder[i].serviceDate = _this.serviceOrder[i].serviceDate.substr(0, 10)
							}
							if (!_this.serviceOrder[i].serviceDate) {
								_this.serviceOrder[i].serviceDate = '[工作日]'
							}
						}
					}
				})
			}
		},
		onLoad(p) {
			this.getServiceOrder()
		}
	}
</script>


<style>
	.p-navbox {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 20px;
	}

	.p-nav {
		height: 40px;
	}

	.p-checked {
		color: #008040;
		border-bottom: 5px solid #008040;
	}

	.p-erweima {
		display: flex;
	}

	.p-erweima image {
		display: inline-block;
		width: 180px;
		height: 180px;
	}

	.p-flow-step {
		display: block;
		line-height: 30px;
		margin-left: 10px;
		padding-left: 10px;
		border-left: 1px solid #808080;
	}

	.p-flow-step-no {
		display: inline-block;
		font-size: 12px;
		height: 22px;
		width: 22px;
		line-height: 22px;
		background-color: #008040;
		border-radius: 50%;
		text-align: center;
		margin-left: -22px;
		margin-right: 20px;
		color: #FFFFFF;
	}

	.p-aixin {
		margin: 10px 40px;
		padding: 10px 20px;
		border: 1px solid #999999;
		border-radius: 10px;
	}
</style>
